<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/detail.css}">
    <script language="JavaScript">
        function showDelImg(imgId) {
            var obj = document.getElementById(imgId);
            if (obj) {
                obj.style.display = 'inline';
            }
        }

        function hiddenDelImg(imgId) {
            var obj = document.getElementById(imgId);
            if (obj) {
                obj.style.display = 'none';
            }
        }

        function delReply(replyId, topicId) {
            if (window.confirm("是否确认删除当前回复？")) {
                window.location.href = 'reply.do?operate=delReply&replyId=' + replyId + '&topicId=' + topicId;
            }
        }

        function delHostReply(replyId) {
            if (window.confirm("是否确认删除这个主人回复？")) {
                window.location.href = 'hostReply.do?operate=delHostReply&replyId=' + replyId;
            }
        }

    </script>
</head>
<body>
<div id="div_back_to_topic_list">
    <a th:href="@{|/topic.do?operate=getTopicList|}">返回日志列表</a>
</div>
<div id="div_topic_detail">
    <div id="div_topic_info">
        <!--topic 自身信息-->
        <table id="tbl_topic_info">
            <tr>
                <td rowspan="2" class="w14 h96">
                    <div class="h64 center " style="width:100%;">
                        <img class="img56 " th:src="@{|/imgs/${session.topic.author.headImg}|}"/>
                    </div>
                    <div class="h32 center" style="width:100%;" th:text="${session.topic.author.nickName}">作者</div>
                </td>
                <td class="topic_title" onmousemove="showDelImg('img01')" onmouseout="hiddenDelImg('img01')">

                    <span th:text="${session.topic.title}"> 标题 </span>
                    <span class="title_date_right"
                          th:text="${#dates.format(session.topic.topicDate,'yyyy-MM-dd HH:mm:ss')}"> 时间 </span>

                </td>
            </tr>
            <tr>
                <td th:text="${session.topic.content}">内容</td>
            </tr>
        </table>
    </div>
    <!--reply 信息-->
    <div id="div_reply_list">
        <table class="tbl_reply_info" th:each="reply : ${session.topic.replyList}">
            <tr>
                <td rowspan="2" class="w14 h88">
                    <div class="h56 center" style="width:100%;">
                        <img class="img48" th:src="@{|/imgs/${reply.author.headImg}|}"/>
                    </div>
                    <div class="h32 center" style="width:100%;" th:text="${reply.author.nickName}"> 昵称</div>
                </td>
                <td class="reply_title"
                    th:onmouseover="|showDelImg('img${reply.id}')|"
                    th:onmouseout="|hiddenDelImg('img${reply.id}')|">
                    <span th:text="|回复  ${session.topic.title}|"> 回复日志标题 </span>
                    <!--
                        出现删除这个小图标的条件：
                        1. 在我自己的空间（那当然我对自己的空间拥有所有的操作权限）
                        2. 当前回复的作者就是我（那我可以删除自己的回复）
                     -->
                    <img th:if="${session.userBasic.id == session.friend.id || session.userBasic.id == reply.author.id}"
                         th:id="|img${reply.id}|"
                         style="float: right;margin-top:2px;margin-right:2px;display: none; width:24px;height: 24px;"
                         th:src="@{/imgs/del.jpg}"
                         th:onclick="|delReply(${reply.id} , ${session.topic.id})|"/>
                    <span class="title_date_right"
                          th:text="${#dates.format(reply.replyDate,'yyyy-MM-dd HH:mm:ss')}"> 日期 </span>
                </td>
            </tr>

            <tr>
                <td th:onmouseover="|showDelImg('a${reply.id}')|" th:onmouseout="|hiddenDelImg('a${reply.id}')|">
                    <span th:text="${reply.content}">回复的内容 </span><br/>
                    <ul style="width: 96%;border:1px dotted lightgray;list-style-type: none;padding-left:8px;padding-right:8px;"
                        th:if="${reply.hostReply != null}">

                        <li style="float: right"
                            th:onclick="|delHostReply(${reply.id})|"
                            th:if="${session.userBasic.id==session.friend.id}"
                        >删除主人回复</li>

                        <li style="color:#6e0000;font-size:12px;width: 100%;border:0px solid red;"
                            th:text="${reply.hostReply.content}"> 主人回复
                        </li>
                        <li style="color:#6e0000;font-size:12px;width:100%;border:0px solid blue;text-align: right;margin-right: 8px;"
                            th:text="|主人回复于 ${#dates.format(reply.hostReply.hostReplyDate,'yyyy-MM-dd HH:mm:ss')}|">
                            主人回复日期
                        </li>
                    </ul>
                    <!--默认不显示 -->
                    <a th:id="|a${reply.id}|"
                       th:if="${session.userBasic.id==session.friend.id}"
                       th:unless="${reply.hostReply!=null}"
                       th:href="@{|/hostReply.do?operate=pageAddHostReply&replyId=${reply.id}|}"
                       style="float: right;display: none;">主人回复
                    </a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div id="div_add_reply">
    <p class="add_reply_title">添加回复</p>
    <form action="reply.do" method="post">
        <input type="hidden" name="operate" value="addReply"/>
        <input type="hidden" name="topicId" th:value="${session.topic.id}"/>

        <table>
            <tr>
                <th style="width: 25%">回复日志：</th>
                <td><input type="text" th:value="|《${session.topic.title}》|" readonly/></td>
            </tr>
            <tr>
                <th>回复内容：</th>
                <td><textarea name="content" rows="3"> </textarea></td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="submit" value=" 回 复 "/>
                    <input type="reset" value=" 重 置 "/>
                </th>
            </tr>
        </table>
    </form>
</div>
</body>
</html>
